<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>影院管理</el-breadcrumb-item>
      <el-breadcrumb-item>影院列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <div
      id="cienmaListMapContainer"
      style="width: 100%; height: 300px; border: 1px solid #aaa"></div>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 列表页面 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        sortable
        align="center"
        prop="cinema_name"
        label="影院名称"
        width="280">
      </el-table-column>
      <el-table-column align="center" prop="address" label="影院地址">
      </el-table-column>
      <el-table-column
        sortable
        :sort-method="sortByLocation"
        align="center"
        label="影院位置"
        width="180">
        <template slot-scope="scope"
          >{{ scope.row.city }} {{ scope.row.district }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="280">
        <template slot-scope="scope">
          <el-button
            @click="showLocation(scope.row.longitude, scope.row.latitude)"
            type="success"
            icon="el-icon-location
"
            title="查看影院位置"
            circle></el-button>
          <el-button
            @click="$router.push(`/home/cinema-room-list/${scope.row.id}`)"
            type="success"
            icon="el-icon-s-unfold
"
            title="查看影院详情"
            circle></el-button>
          <el-button
            @click="$router.push(`/home/cinema-update/${scope.row.id}`)"
            type="warning"
            icon="el-icon-edit"
            title="修改影院信息"
            circle></el-button>
          <el-button
            @click="deleteCinema(scope.row.id)"
            type="danger"
            title="删除影院"
            icon="el-icon-delete"
            circle></el-button> </template
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader"

export default {
  data() {
    return {
      // 保存影院列表
      tableData: [],
      // 地图对象
      map: null,
    }
  },
  methods: {
    // 删除影院
    deleteCinema(id) {
      this.$confirm("此操作将永久删除该影院, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          })
          this.$http.CinemaApi.del({ id }).then((res) => {
            console.log(res)
            if (res.data.code == 200) {
              this.$message.success("删除成功")
              this.loadCinemaList()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          })
        })
    },
    //显示影院位置
    showLocation(lng, lat) {
      if (this.map != null) {
        this.map.setCenter([lng, lat], false, 1000)
        this.map.setZoom(18, false, 1000)
      }
    },
    initMap() {
      AMapLoader.load({
        key: "73bd306eb27f468f5a687d38d1cd0540", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("cienmaListMapContainer", {
            zoom: 11, //级别
            center: [116.397428, 39.90923], //中心点坐标
            viewMode: "3D", //使用3D视图
          })
          console.log("加载地图完成")
          // 将所有影院的位置显示出来
          this.tableData.forEach((item) => {
            let lat = item.latitude
            let lng = item.longitude
            // 创建Marker 添加到地图
            let marker = null
            marker = new AMap.Marker({
              position: new AMap.LngLat(lng, lat),
            })
            this.map.add(marker)
          })
        })
        .catch((e) => {
          console.log(e)
        })
    },
    // 影院位置排序
    sortByLocation(a, b) {
      console.log(a, b)
      let astr = a.city + a.district
      let bstr = b.city + b.district
      return astr > bstr
    },
    // 加载影院列表
    loadCinemaList() {
      this.$http.CinemaApi.list().then((res) => {
        console.log("加载所有影院数据", res)
        if (res.data.code == 200) {
          this.tableData = res.data.data
        }
      })
    },
  },
  mounted() {
    // 加载影院列表
    this.loadCinemaList()
    // 初始化地图
    this.initMap()
  },
}
</script>
<style></style>
